<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/free.css">
</head>

<body>
    <div id="app" v-cloak>
        <el-row>
            <!-- 筛选器 -->
            <el-col :xs="24" class="border-bottom border-light">
                <tab-nav flex="justify-between" :options="type" :loading="loading" :active="defaultStatus" @change="handleChange"></tab-nav>
            </el-col>
            <!-- 列表 -->
            <el-col :xs="24">
                <div class="w-100" style="height:calc(100vh - 82rem);overflow-y: auto;" @scroll="handleScroll">
                    <div @click="handleDetail(item)" v-for="(item, index) in tableData" :key="index" class="m-2 flex flex-column rounded-lg bg-white shadow position-relative">
                        <div class="mx-2 mt-2 font-sm text-dark text-ellipsis">
                            <span>销售订单号：</span>
                            <span class="font-sm">{{ item.Sales_Order_SerialNumber }}</span>
                        </div>
                        <el-tag class="position-absolute" style="right: 20rem;top: 20rem;" :type="tagCss(item).type">{{tagCss(item).label}}</el-tag>
                        <div class="py-2 flex align-center justify-center">
                            <div style="width: 200rem;height: 200rem;" class="ml-2 flex-shrink overflow-hidden rounded-lg flex align-center border border-success">
                                <el-image class="w-100" :src="imageApi + item.Picture_URL" fit="contain"><!-- 接着展示商品图片就行 -->
                                    <div slot="error" class="bg-light flex justify-center align-center" style="width: 200rem;height: 200rem;">
                                        <i class=" el-icon-picture text-muted" style="font-size: 120rem;"></i>
                                    </div>
                                </el-image>
                            </div>
                            <div class="w-100 mx-2">
                                <div class="font w-100 flex justify-between align-center" style="line-height: 50rem;">
                                    <div class="text-ellipsis">
                                        <span>商品名称：</span>
                                        <span class="font">{{ item.Article_Name }}</span>
                                    </div>
                                    <span class="font font-weight-bold">￥{{ item.Sales_Amount }}</span>
                                </div>
                                <div class="font text-ellipsis w-100" style="line-height: 50rem;">
                                    <span>规格：</span>
                                    <span class="font">{{ item.Specifications_Name }}</span>
                                    <span style="margin-left: 6rem;">×{{ item.Quantity }}</span>
                                </div>
                                
                            </div>
                        </div>
                        <div class="mx-2 mb-2 font-sm text-hover-primary text-ellipsis">
                            <span>门店名称：</span>
                            <span class="font-sm">{{ item.Store_Name }}</span>
                        </div>
                        <div class="mx-2 mb-2 text-right">
                            <span>实付款：￥</span>
                            <span class="font font-weight-bold">{{ item.Collection_Amount }}</span>
                        </div>
			        </div>              
                    <div class="font-sm text-muted text-center mb-2" v-show="tableData.length == total">
                        <el-empty v-show="tableData.length == 0" description="暂无更多数据"></el-empty>
                        <span v-show="tableData.length != 0">暂无更多数据</span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/jweixin.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/my-order.js"></script>
</body>

</html>
